<template>
  <div class="">
    <el-table :data="tData" border stripe>
      <el-table-column type="index" width="60" label="序号"/>
      <el-table-column
        prop="captureDate"
        label="拍摄时间">
      </el-table-column>
      <el-table-column
        prop="sunElev"
        label="太阳角">
      </el-table-column>
      <el-table-column
        prop="sensor"
        label="传感器">
      </el-table-column>
      <el-table-column
        prop=""
        label="操作">
        <template #default="scope">
          <el-button type="" size="small" @click="showLine(scope.row)">查看</el-button>
          
        </template>
      </el-table-column>
      
    </el-table>
    <br>
    <el-pagination
      @size-change="pageChange"
      @current-change="pageChange"
      v-model:currentPage="currentPage"
      :page-sizes="[10, 40, 80, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination>
  </div>
  <el-dialog
    title="查看镶嵌线"
    v-model="ifshowxiangqianxian"
    width="70%">
    <div style="width: 100%; height: 500px; position: relative">
      <earthview :itemOptions="selitem" v-if="ifshowxiangqianxian" />
    </div>
    <template #footer>
    <span>
      <el-button type="primary" @click="ifshowxiangqianxian = false">确定</el-button>
    </span>
    </template>
  </el-dialog>
  
</template>
<script setup>
import { ref, onMounted, reactive, defineProps } from "vue";
import { apiList } from "@/api/apiList";

import _ from 'lodash'

let totalNum = ref(0)
let pageSize = ref(10)
let currentPage = ref(1)

let prop = defineProps({
  itemdata: {},
});

let selitem = {};

let ifshowxiangqianxian = ref(false);

let tData = ref([])

function showLine(params) {
  selitem = params
  selitem.type = "xiangqianxianlineID";
  ifshowxiangqianxian.value = true;
}

function loadData() {
  // console.log(prop);
  // console.log(prop.itemdata);
  // console.log(prop.itemdata.batchVersion);
  let params = {
    lineVersion: prop.itemdata.batchVersion,
    pageSize: pageSize.value,
    pageNum: currentPage.value,
  }
  apiList.getLineList(params).then((res) => {
    tData.value = res.rows
    totalNum.value = res.total
  });
}

function pageChange(){
  loadData()
}

onMounted(() => {
  loadData();
});
</script>
<style lang="scss" scoped></style>
